#react inline style

[a-riot-pixie]

Choices

I've been looking into attachment styles, how to heal them, how to support the different types, and what they look like.

Turns out I fall into the category of disorganized attachment, or fearful avoidant.

It comes down to my parents were inconsistent with me when I was young (they still are, so that is no surprise) and it causes me to turn to a fight, flight, or freeze response when I feel that anyone in my life is doing the same or about to do the same.

That is of course, the really really simplified version. If you want to know more feel free to look it up. I am not a therapist and have no license to give help to anyone else with this. I have spent years just trying to figure out myself, what exactly is broken in me and how can I repair it.

There is a lot of advice on how to handle this attachment style. Not nearly as much as if I were just a simple avoidant or anxious, but there is still enough out there that I have a good starting point.

One of the best things I saw on how to start to heal was to figure out what it is that causes you to run, freak-out, pull closer, just generally turn into a bi-polar monster of I love you, hate you, leave me alone, how could you give up on me, why didn't you understand that when I told you to go that I wanted you to say.

So, I've been thinking about what my triggers for this are.

I feel like I have a lot and hardly any at all, but I know it's somewhere in the middle.

Choice seems to be a huge trigger for me.

People making choices for me. Making me feel as though I have no choices. Just having to make a final choice on my own.

I rarely feel like the choices I make are because I want to make them, but always influenced by everyone else around me.

When someone forgets about me, I feel like they made the choice to do that.

When someone isn't open with me, I feel like they are making the conscious choice to withhold.

When someone tells me they didn't tell me something because they didn't want me to react in the way I am reacting, I get extra mad because I know the reaction is based in them taking away my choice in how to react, how to feel, how to respond in any way that I have control over. They have made the choice of both my feelings and my reaction to those feelings from me.

This last one happens a lot.

I wish i could say it only happens with people who have known me a long time. Who have seen me freak out, lose control, shut down, whatever bad and extreme reaction they first expect and then recieve.

It happens with everyone.

I am a very vocally dramatic person.

When I am feeling something I give voice to it and in response people assume, because I'm also brutally honest, that everything they do will receive a reaction in proportion to how much they believe I care about the thing.

The problem is the reaction is always based on them withholding information and not letting me have a choice in how to handle whatever it is they think I can't handle at all.

I'm told people walk on eggshells for me, but I could never understand why.

My reactions always feel proportional to the level of hurt I feel. When I feel my choices are being forced or taken from me, the level of betrayal is amplified.

My reaction is amplified.

If that person is also someone I have a history of freaking out with, on top of the betrayal, I also feel I have to respond inline with their expectations of my response.

It is super annoying when I don't react the way someone expects, when I am calm. I am always met with surprise and told how much I have grown.

Every single time this happens, all I want to do is scream at the top of my lungs, "No! I have always been this way, you just never gave me the chance or the choice to show it!"

Now I am behaving badly again.

I have been dating someone who is also a bit broken, he says he is an avoidant, I think he might be more disorganized than her realizes, but that doesn't matter.

We haven't talked in days.

Why?

He felt pressure to save me. To fix my broken life. The more I told him he couldn't, the more I said there was nothing to be done, by him or anyone else, the more he felt rejected hurt and also pressured.

I know this. I shouldn't have fought him about it. I should not have told him all the things I understand about everything he is doing and all the reasons I can see that are causing him to do it.

That was me taking his choices away,

I felt he had taken my choices away.

So far, all I have done in my efforts to both run away and cling to him is hurt both of us. All because I am scared to just let go and let people decide for themselves if they want to love me, be with me, remember me, see me, stay. And not be devastated by their choices.

I make it hard to love me, because it feels like a choice I can control.

If I never let anyone else choose without my begging, pushing, pulling shit, they can never choose to hurt me.

I make myself feel as though they have taken away my choice, but I know the entire time I am making them choose when they don't want to.

I am taking away their choice.

I am trying to let go.

I am actively trying with every breath I take to make the choice to let others make their own choices and not be hurt or surprised by those choices.

My impulse is to keep begging to be loved.

I know begging and pleading will change nothing, but it feels like it gives me some power. Some sort of control. It might, but not the kind I want.

I want him, not because I feel like he doesn't want me, but because he saw me, wanted me, loved me despite everything and I didn't feel worthy of any of that. I wanted to be the person he saw, I didn't feel like I was. Once he managed to convince me I was actually all the things he saw me to be, I freaked out.

Apparently this is normal for the disorganized attachment, the closer you get to healthy, the more you fight it and freak out.

I'm not sure what the professionals would say about this, but for me it's choices.

I have to choose to be the person they see, but i don't feel like I can. I feel like them seeing me that way is making the choice for me of who I am and that makes me crazy because I can't handle anyone else making choices for me, unless I ask (and if I ask and you make the wrong choice or no choice I will also spin out).

I'm trying to let go so he can make the choice of what he wants and I can see clearly enough to also make the choice.

I have pushed and begged him to make a choice any choice, but that is also me taking away his choice to not choose.

It doesn't matter that he needs to choose, or that he should choose, or that I want him to choose.

He has to choose to choose.

I have to do the same.

[turtlemagnum]

sometimes i see posts and quotes about growing up in boyhood, usually written by queer people, that make me wonder on a fundamental level if i experienced the same socialization as everyone else. i've, never really had my gender policed? i never really got shit for any of the more feminine or nerdy interests i had growing up, never really got bullied for any reason, the only time i cam really recall getting my gender questioned was like, my uncle playing video games with me and calling me shit like "sissy" just to get a rise out of me, to which i didn't really react because he used such lame insult, to which he said something to the effect of "you're no fun to bully". did i somehow get such an oblivious kind of autism that i didnt even realize i was getting shit? am i just so effortlessly masc that it never really came up? i mean, i've never really been a very flamboyant person, there's a reason that even before i found my current style of 90% of my wardrobe being flannel i was still pretty inline with the more typical masculine presentation of "jeans and a t-shirt", y'know? maybe it's just a matter of how i was a pretty isolated kid with very few friends in general, i dunno

[hob28]

Learn HTML and CSS: A Comprehensive Guide for Beginners

Introduction to HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core technologies for creating web pages. HTML provides the structure of the page, while CSS defines its style and layout. This guide aims to equip beginners with the essential knowledge to start building and designing web pages.

Why Learn HTML and CSS?

HTML and CSS are fundamental skills for web development. Whether you're looking to create personal websites, start a career in web development, or enhance your current skill set, understanding these technologies is crucial. They form the basis for more advanced languages and frameworks like JavaScript, React, and Angular.

Getting Started with HTML and CSS

To get started, you need a text editor and a web browser. Popular text editors include Visual Studio Code, Sublime Text, and Atom. Browsers like Google Chrome, Firefox, and Safari are excellent for viewing and testing your web pages.

Basic HTML Structure

HTML documents have a basic structure composed of various elements and tags. Here’s a simple example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>My First Web Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1>Welcome to My Web Page</h1>

    <p>This is a paragraph of text on my web page.</p>

</body>

</html>

: Declares the document type and HTML version.

: The root element of an HTML page.

: Contains meta-information about the document.

: Connects the HTML to an external CSS file.

: Contains the content of the web page.

Essential HTML Tags

HTML uses various tags to define different parts of a web page:

to : Headings of different levels.

: Paragraph of text.

: Anchor tag for hyperlinks.

: Embeds images.

: Defines divisions or sections.

: Inline container for text.

Creating Your First HTML Page

Follow these steps to create a simple HTML page:

Open your text editor.

Write the basic HTML structure as shown above.

Add a heading with the tag.

Add a paragraph with the tag.

Save the file with a .html extension (e.g., index.html).

Open the file in your web browser to view your web page.

Introduction to CSS

CSS is used to style and layout HTML elements. It can be included within the HTML file using the <style> tag or in a separate .css file linked with the <link> tag.

Basic CSS Syntax

CSS consists of selectors and declarations. Here’s an example:

css

Copy code

h1 {

    color: blue;

    font-size: 24px;

}

Selector (h1): Specifies the HTML element to be styled.

Declaration Block: Contains one or more declarations, each consisting of a property and a value.

Styling HTML with CSS

To style your HTML elements, you can use different selectors:

Element Selector: Styles all instances of an element.

Class Selector: Styles elements with a specific class.

ID Selector: Styles a single element with a specific ID.

Example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Styled Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1 class="main-heading">Hello, World!</h1>

    <p id="intro">This is an introduction paragraph.</p>

</body>

</html>

In the styles.css file:

css

Copy code

.main-heading {

    color: green;

    text-align: center;

}

#intro {

    font-size: 18px;

    color: grey;

}

CSS Layout Techniques

CSS provides several layout techniques to design complex web pages:

Box Model: Defines the structure of an element’s content, padding, border, and margin.

Flexbox: A layout model for arranging items within a container, making it easier to design flexible responsive layouts.

Grid Layout: A two-dimensional layout system for more complex layouts.

Example of Flexbox:

css

Copy code

.container {

    display: flex;

    justify-content: space-around;

}

.item {

    width: 100px;

    height: 100px;

    background-color: lightblue;

}

Best Practices for Writing HTML and CSS

Semantic HTML: Use HTML tags that describe their meaning clearly (e.g., , , ).

Clean Code: Indent nested elements and use comments for better readability.

Validation: Use tools like the W3C Markup Validation Service to ensure your HTML and CSS are error-free and standards-compliant.

Accessibility: Make sure your website is accessible to all users, including those with disabilities, by using proper HTML tags and attributes.

Free Resources to Learn HTML and CSS

W3Schools: Comprehensive tutorials and references.

MDN Web Docs: Detailed documentation and guides for HTML, CSS, and JavaScript.

Codecademy: Interactive courses on web development.

FreeCodeCamp: Extensive curriculum covering HTML, CSS, and more.

Khan Academy: Lessons on computer programming and web development.

FAQs about Learning HTML and CSS

Q: What is HTML and CSS? A: HTML (HyperText Markup Language) structures web pages, while CSS (Cascading Style Sheets) styles and layouts the web pages.

Q: Why should I learn HTML and CSS? A: Learning HTML and CSS is essential for creating websites, understanding web development frameworks, and progressing to more advanced programming languages.

Q: Do I need prior experience to learn HTML and CSS? A: No prior experience is required. HTML and CSS are beginner-friendly and easy to learn.

Q: How long does it take to learn HTML and CSS? A: The time varies depending on your learning pace. With consistent practice, you can grasp the basics in a few weeks.

Q: Can I create a website using only HTML and CSS? A: Yes, you can create a basic website. For more complex functionality, you'll need to learn JavaScript.

Q: What tools do I need to start learning HTML and CSS? A: You need a text editor (e.g., Visual Studio Code, Sublime Text) and a web browser (e.g., Google Chrome, Firefox).

Q: Are there free resources available to learn HTML and CSS? A: Yes, there are many free resources available online, including W3Schools, MDN Web Docs, Codecademy, FreeCodeCamp, and Khan Academy.

[exeggcute]

the way you do inline styling in react/MDX is so stupid and it's poisoned me. instead of <style="background-color: white"> you have to go <style={{backgroundColor: 'white'}}>. fucking camel case!!

[netzilatechnologies]

Why Tailwind CSS Is Changing Modern Web UI Design?

In recent years, the web design world has seen a significant shift in how developers and designers approach styling—thanks to Tailwind CSS. From startups to enterprise-level companies, Tailwind CSS has quickly become the go-to utility-first CSS framework. But why is Tailwind CSS changing modern web UI design so dramatically?

Let’s break it down.

1. Utility-First Means More Control

Tailwind CSS doesn’t rely on predefined UI components. Instead, it gives you low-level utility classes like flex, pt-4, text-center, and more. These small, atomic classes give developers full control over styling without writing custom CSS.

This method promotes consistency and allows for faster development. You're building designs directly in your HTML—no context-switching between HTML and CSS files.

2. Faster Prototyping = Quicker Results

Designers and developers love how quickly they can bring a layout to life with Tailwind. With built-in classes for spacing, typography, colors, and responsive design, prototyping becomes incredibly efficient.

In fact, many UI/UX teams are using Tailwind to create and iterate on designs faster than ever—without needing complex design systems from scratch.

3. Responsive Design Made Easy

Tailwind’s mobile-first responsive utilities make it easier to adapt your design across breakpoints. Rather than redefining styles in separate media queries, you can do it inline with classes like md:w-1/2 or lg:flex-row. This means fewer files, less code, and cleaner breakpoints baked into your markup.

4. Built for Modern Development Stacks

Tailwind CSS integrates seamlessly with modern frameworks like React, Vue, Angular, Next.js, and more. It works wonderfully in component-based design systems and plays well with tools like PostCSS and PurgeCSS for performance optimization.

5. Customizable and Scalable

One of Tailwind’s strongest points is its configuration file (tailwind.config.js). This file allows developers to define custom color palettes, fonts, breakpoints, and more—resulting in a design system that scales with the product.

It lets teams enforce a consistent look across apps while still having the flexibility to change styles when needed.

6. Growing Ecosystem and Community

The Tailwind community is booming. From Tailwind UI (prebuilt components by the creators) to plugins and themes, there's a growing ecosystem supporting faster development.

The documentation is also one of the best out there—clear, well-organized, and packed with examples.

Final Thoughts

Tailwind CSS isn’t just a trend—it’s a fundamental shift in how we build interfaces. It empowers developers to create clean, scalable, and responsive UIs with less effort and more consistency.

If you're still relying on traditional CSS or bulky frameworks, it might be time to consider why Tailwind CSS is becoming the new standard for modern web design.

Let me know if you'd like this converted into a LinkedIn post, blog header image prompt, or want anchor texts and service mentions like "hire frontend developer" or "custom web development services" linked to Netzila Technologies.

[waywardsaladgiver]

The Power of Scalable Vector Graphics in Modern Design

In the world of digital design, SVG icons have become an essential asset for developers and designers. Unlike traditional image formats such as PNG or JPEG, SVG files are vector-based, meaning they can scale without losing quality. This makes them ideal for responsive web design, ensuring that icons look crisp and clear on any screen size. Additionally, SVGs are lightweight and can be customized easily using CSS and JavaScript, making them a preferred choice for modern applications.

One of the most widely recognized tools for video editing is Icon Capcut. CapCut is a powerful and user-friendly application that allows users to edit videos with professional-grade tools. Many designers and developers seek high-quality CapCut icons to integrate into their projects, whether for mobile apps, websites, or promotional materials. Fortunately, SVG Stack provides access to free and scalable versions of the CapCut icon, making it easier to enhance visual presentations with a polished and professional look.

For developers working with frameworks like ReactJS, integrating icons efficiently is crucial. One of the best solutions is using ReactJS SVG icon files. Since React promotes component-based development, SVG icons can be imported as reusable components, improving maintainability and performance. Unlike font-based icons, SVGs allow developers to manipulate colors, sizes, and animations dynamically using inline styles or props. This level of customization makes them a valuable asset for building modern, interactive web applications.

By utilizing SVG Stack, designers and developers can access a vast collection of scalable vector icons for various applications. Whether you are looking for general-purpose SVG icons, a specialized icon Capcut, or a ReactJS SVG icon, you can find high-quality resources that enhance your projects. SVG Stack ensures that these assets are free, customizable, and easy to integrate into any design workflow.

[jcmarchi]

Web Components Demystified

New Post has been published on https://thedigitalinsider.com/web-components-demystified/

Web Components Demystified

Scott Jehl released a course called Web Components Demystified. I love that name because it says what the course is about right on the tin: you’re going to learn about web components and clear up any confusion you may already have about them.

And there’s plenty of confusion to go around! “Components” is already a loaded term that’s come to mean everything from a piece of UI, like a search component, to an element you can drop in and reuse anywhere, such as a React component. The web is chock-full of components, tell you what.

But what we’re talking about here is a set of standards where HTML, CSS, and JavaScript rally together so that we can create custom elements that behave exactly how we want them to. It’s how we can make an element called <tasty-pizza> and the browser knows what to do with it.

This is my full set of notes from Scott’s course. I wouldn’t say they’re complete or even a direct one-to-one replacement for watching the course. You’ll still want to do that on your own, and I encourage you to because Scott is an excellent teacher who makes all of this stuff extremely accessible, even to noobs like me.

Chapter 1: What Web Components Are… and Aren’t

Web components are not built-in elements, even though that’s what they might look like at first glance. Rather, they are a set of technologies that allow us to instruct what the element is and how it behaves. Think of it the same way that “responsive web design” is not a thing but rather a set of strategies for adapting design to different web contexts. So, just as responsive web design is a set of ingredients — including media fluid grids, flexible images, and media queries — web components are a concoction involving:

Custom elements

These are HTML elements that are not built into the browser. We make them up. They include a letter and a dash.

<my-fancy-heading> Hey, I'm Fancy </my-fancy-heading>

We’ll go over these in greater detail in the next module.

HTML templates

Templates are bits of reusable markup that generate more markup. We can hide something until we make use of it.

<template> <li class="user"> <h2 class="name"></h2> <p class="bio"></p> </li> </template>

Much more on this in the third module.

Shadow DOM

The DOM is queryable.

document.querySelector("h1"); // <h1>Hello, World</h1>

The Shadow DOM is a fragment of the DOM where markup, scripts, and styles are encapsulated from other DOM elements. We’ll cover this in the fourth module, including how to <slot> content.

There used to be a fourth “ingredient” called HTML Imports, but those have been nixed.

In short, web components might be called “components” but they aren’t really components more than technologies. In React, components sort of work like partials. It defines a snippet of HTML that you drop into your code and it outputs in the DOM. Web Components are built off of HTML Elements. They are not replaced when rendered the way they are in JavaScript component frameworks. Web components are quite literally HTML elements and have to obey HTML rules. For example:

<!-- Nope --> <ul> <my-list-item></my-list-item> <!-- etc. --> </ul> <!-- Yep --> <ul> <li> <my-list-item></my-list-item> </li> </ul>

We’re generating meaningful HTML up-front rather than rendering it in the browser through the client after the fact. Provide the markup and enhance it! Web components have been around a while now, even if it seems we’re only starting to talk about them now.

Chapter 2: Custom Elements

First off, custom elements are not built-in HTML elements. We instruct what they are and how they behave. They are named with a dash and at must contain least one letter. All of the following are valid names for custom elements:

<super-component>

<a->

<a-4->

<card-10.0.1>

<card-♠️>

Just remember that there are some reserved names for MathML and SVG elements, like <font-face>. Also, they cannot be void elements, e.g. <my-element />, meaning they have to have a correspoonding closing tag.

Since custom elements are not built-in elements, they are undefined by default — and being undefined can be a useful thing! That means we can use them as containers with default properties. For example, they are display: inline by default and inherit the current font-family, which can be useful to pass down to the contents. We can also use them as styling hooks since they can be selected in CSS. Or maybe they can be used for accessibility hints. The bottom line is that they do not require JavaScript in order to make them immediately useful.

Working with JavaScript. If there is one <my-button> on the page, we can query it and set a click handler on it with an event listener. But if we were to insert more instances on the page later, we would need to query it when it’s appended and re-run the function since it is not part of the original document rendering.

Defining a custom element

This defines and registers the custom element. It teaches the browser that this is an instance of the Custom Elements API and extends the same class that makes other HTML elements valid HTML elements:

<my-element>My Element</my-element> <script> customElements.define("my-element", class extends HTMLElement ); </script>

Check out the methods we get immediate access to:

Breaking down the syntax

customElements .define( "my-element", class extends HTMLElement ); // Functionally the same as: class MyElement extends HTMLElement customElements.define("my-element", MyElement); export default myElement // ...which makes it importable by other elements: import MyElement from './MyElement.js'; const myElement = new MyElement(); document.body.appendChild(myElement); // <body> // <my-element></my-element> // </body> // Or simply pull it into a page // Don't need to `export default` but it doesn't hurt to leave it // <my-element>My Element</my-element> // <script type="module" src="my-element.js"></script>

It’s possible to define a custom element by extending a specific HTML element. The specification documents this, but Scott is focusing on the primary way.

class WordCount extends HTMLParagraphElement customElements.define("word-count", WordCount, extends: "p" ); // <p is="word-count">This is a custom paragraph!</p>

Scott says do not use this because WebKit is not going to implement it. We would have to polyfill it forever, or as long as WebKit holds out. Consider it a dead end.

The lifecycle

A component has various moments in its “life” span:

Constructed (constructor)

Connected (connectedCallback)

Adopted (adoptedCallback)

Attribute Changed (attributeChangedCallback)

Disconnected (disconnectedCallback)

We can hook into these to define the element’s behavior.

class myElement extends HTMLElement constructor() connectedCallback() adoptedCallback() attributeChangedCallback() disconnectedCallback() customElements.define("my-element", MyElement);

constructor()

class myElement extends HTMLElement constructor() // provides us with the `this` keyword super() // add a property this.someProperty = "Some value goes here"; // add event listener this.addEventListener("click", () => ); customElements.define("my-element", MyElement);

“When the constructor is called, do this…” We don’t have to have a constructor when working with custom elements, but if we do, then we need to call super() because we’re extending another class and we’ll get all of those properties.

Constructor is useful, but not for a lot of things. It’s useful for setting up initial state, registering default properties, adding event listeners, and even creating Shadow DOM (which Scott will get into in a later module). For example, we are unable to sniff out whether or not the custom element is in another element because we don’t know anything about its parent container yet (that’s where other lifecycle methods come into play) — we’ve merely defined it.

connectedCallback()

class myElement extends HTMLElement // the constructor is unnecessary in this example but doesn't hurt. constructor() super() // let me know when my element has been found on the page. connectedCallback() console.log(`$this.nodeName was added to the page.`); customElements.define("my-element", MyElement);

Note that there is some strangeness when it comes to timing things. Sometimes isConnected returns true during the constructor. connectedCallback() is our best way to know when the component is found on the page. This is the moment it is connected to the DOM. Use it to attach event listeners.

If the <script> tag comes before the DOM is parsed, then it might not recognize childNodes. This is not an uncommon situation. But if we add type="module" to the <script>, then the script is deferred and we get the child nodes. Using setTimeout can also work, but it looks a little gross.

disconnectedCallback

class myElement extends HTMLElement // let me know when my element has been found on the page. disconnectedCallback() console.log(`$this.nodeName was removed from the page.`); customElements.define("my-element", MyElement);

This is useful when the component needs to be cleaned up, perhaps like stopping an animation or preventing memory links.

adoptedCallback()

This is when the component is adopted by another document or page. Say you have some iframes on a page and move a custom element from the page into an iframe, then it would be adopted in that scenario. It would be created, then added, then removed, then adopted, then added again. That’s a full lifecycle! This callback is adopted automatically simply by picking it up and dragging it between documents in the DOM.

Custom elements and attributes

Unlike React, HTML attributes are strings (not props!). Global attributes work as you’d expect, though some global attributes are reflected as properties. You can make any attribute do that if you want, just be sure to use care and caution when naming because, well, we don’t want any conflicts.

Avoid standard attributes on a custom element as well, as that can be confusing particularly when handing a component to another developer. Example: using type as an attribute which is also used by <input> elements. We could say data-type instead. (Remember that Chris has a comprehensive guide on using data attributes.)

Examples

Here’s a quick example showing how to get a greeting attribute and set it on the custom element:

class MyElement extends HTMLElement get greeting() return this.getAttribute('greeting'); // return this.hasAttribute('greeting'); set greeting(val) if(val) this.setAttribute('greeting', val); // this setAttribute('greeting', ''); else this.removeAttribute('greeting'); customElements.define("my-element", MyElement);

Another example, this time showing a callback for when the attribute has changed, which prints it in the element’s contents:

<my-element greeting="hello">hello</my-element> <!-- Change text greeting when attribite greeting changes --> <script> class MyElement extends HTMLElement static observedAttributes = ["greeting"]; attributeChangedCallback(name, oldValue, newValue) if (name === 'greeting' && oldValue && oldValue !== newValue) console.log(name + " changed"); this.textContent = newValue; customElements.define("my-element", MyElement); </script>

A few more custom element methods:

customElements.get('my-element'); // returns MyElement Class customElements.getName(MyElement); // returns 'my-element' customElements.whenDefined("my-element"); // waits for custom element to be defined const el = document.createElement("spider-man"); class SpiderMan extends HTMLElement constructor() super(); console.log("constructor!!"); customElements.define("spider-man", SpiderMan); customElements.upgrade(el); // returns "constructor!!"

Custom methods and events:

<my-element><button>My Element</button></my-element> <script> customElements.define("my-element", class extends HTMLElement connectedCallback() const btn = this.firstElementChild; btn.addEventListener("click", this.handleClick) handleClick() console.log(this); ); </script>

Bring your own base class, in the same way web components frameworks like Lit do:

class BaseElement extends HTMLElement $ = this.querySelector; // extend the base, use its helper class myElement extends BaseElement firstLi = this.$("li");

Practice prompt

Create a custom HTML element called <say-hi> that displays the text “Hi, World!” when added to the page:

Enhance the element to accept a name attribute, displaying "Hi, [Name]!" instead:

Chapter 3: HTML Templates

The <template> element is not for users but developers. It is not exposed visibly by browsers.

<template>The browser ignores everything in here.</template>

Templates are designed to hold HTML fragments:

<template> <div class="user-profile"> <h2 class="name">Scott</h2> <p class="bio">Author</p> </div> </template>

A template is selectable in CSS; it just doesn’t render. It’s a document fragment. The inner document is a #document-fragment. Not sure why you’d do this, but it illustrates the point that templates are selectable:

template display: block; ` /* Nope */ template + div height: 100px; width: 100px; /* Works */

The content property

No, not in CSS, but JavaScript. We can query the inner contents of a template and print them somewhere else.

<template> <p>Hi</p> </template> <script> const myTmpl = documenty.querySelector("template").content; console.log(myTmpl); </script>

Using a Document Fragment without a <template>

const myFrag = document.createDocumentFragment(); myFrag.innerHTML = "<p>Test</p>"; // Nope const myP = document.createElement("p"); // Yep myP.textContent = "Hi!"; myFrag.append(myP); // use the fragment document.body.append(myFrag);

Clone a node

<template> <p>Hi</p> </template> <script> const myTmpl = documenty.querySelector("template").content; console.log(myTmpl); // Oops, only works one time! We need to clone it. </script>

Oops, the component only works one time! We need to clone it if we want multiple instances:

<template> <p>Hi</p> </template> <script> const myTmpl = document.querySelector("template").content; document.body.append(myTmpl.cloneNode(true)); // true is necessary document.body.append(myTmpl.cloneNode(true)); document.body.append(myTmpl.cloneNode(true)); document.body.append(myTmpl.cloneNode(true)); </script>

A more practical example

Let’s stub out a template for a list item and then insert them into an unordered list:

<template id="tmpl-user"><li><strong></strong>: <span></span></li></template> <ul id="users"></ul> <script> const usersElement = document.querySelector("#users"); const userTmpl = document.querySelector("#tmpl-user").content; const users = [name: "Bob", title: "Artist", name: "Jane", title: "Doctor"]; users.forEach(user => let thisLi = userTmpl.cloneNode(true); thisLi.querySelector("strong").textContent = user.name; thisLi.querySelector("span").textContent = user.title; usersElement.append(thisLi); ); </script>

The other way to use templates that we’ll get to in the next module: Shadow DOM

<template shadowroot=open> <p>Hi, I'm in the Shadow DOM</p> </template>

Chapter 4: Shadow DOM

Here we go, this is a heady chapter! The Shadow DOM reminds me of playing bass in a band: it’s easy to understand but incredibly difficult to master. It’s easy to understand that there are these nodes in the DOM that are encapsulated from everything else. They’re there, we just can’t really touch them with regular CSS and JavaScript without some finagling. It’s the finagling that’s difficult to master. There are times when the Shadow DOM is going to be your best friend because it prevents outside styles and scripts from leaking in and mucking things up. Then again, you’re most certainly going go want to style or apply scripts to those nodes and you have to figure that part out.

That’s where web components really shine. We get the benefits of an element that’s encapsulated from outside noise but we’re left with the responsibility of defining everything for it ourselves.

Select elements are a great example of the Shadow DOM. Shadow roots! Slots! They’re all part of the puzzle.

Using the Shadow DOM

We covered the <template> element in the last chapter and determined that it renders in the Shadow DOM without getting displayed on the page.

<template shadowrootmode="closed"> <p>This will render in the Shadow DOM.</p> </template>

In this case, the <template> is rendered as a #shadow-root without the <template> element’s tags. It’s a fragment of code. So, while the paragraph inside the template is rendered, the <template> itself is not. It effectively marks the Shadow DOM’s boundaries. If we were to omit the shadowrootmode attribute, then we simply get an unrendered template. Either way, though, the paragraph is there in the DOM and it is encapsulated from other styles and scripts on the page.

These are all of the elements that can have a shadow.

Breaching the shadow

There are times you’re going to want to “pierce” the Shadow DOM to allow for some styling and scripts. The content is relatively protected but we can open the shadowrootmode and allow some access.

<div> <template shadowrootmode="open"> <p>This will render in the Shadow DOM.</p> </template> </div>

Now we can query the div that contains the <template> and select the #shadow-root:

document.querySelector("div").shadowRoot // #shadow-root (open) // <p>This will render in the Shadow DOM.</p>

We need that <div> in there so we have something to query in the DOM to get to the paragraph. Remember, the <template> is not actually rendered at all.

Additional shadow attributes

<!-- should this root stay with a parent clone? --> <template shadowrootcloneable> <!-- allow shadow to be serialized into a string object — can forget about this --> <template shadowrootserializable> <!-- click in element focuses first focusable element --> <template shadowrootdelegatesfocus>

Shadow DOM siblings

When you add a shadow root, it becomes the only rendered root in that shadow host. Any elements after a shadow root node in the DOM simply don’t render. If a DOM element contains more than one shadow root node, the ones after the first just become template tags. It’s sort of like the Shadow DOM is a monster that eats the siblings.

Slots bring those siblings back!

<div> <template shadowroot="closed"> <slot></slot> <p>I'm a sibling of a shadow root, and I am visible.</p> </template> </div>

All of the siblings go through the slots and are distributed that way. It’s sort of like slots allow us to open the monster’s mouth and see what’s inside.

Declaring the Shadow DOM

Using templates is the declarative way to define the Shadow DOM. We can also define the Shadow DOM imperatively using JavaScript. So, this is doing the exact same thing as the last code snippet, only it’s done programmatically in JavaScript:

<my-element> <template shadowroot="open"> <p>This will render in the Shadow DOM.</p> </template> </my-element> <script> customElements.define('my-element', class extends HTMLElement constructor() super(); // attaches a shadow root node this.attachShadow(mode: "open"); // inserts a slot into the template this.shadowRoot.innerHTML = '<slot></slot>'; ); </script>

Another example:

<my-status>available</my-status> <script> customElements.define('my-status', class extends HTMLElement constructor() super(); this.attachShadow(mode: "open"); this.shadowRoot.innerHTML = '<p>This item is currently: <slot></slot></p>'; ); </script>

So, is it better to be declarative or imperative? Like the weather where I live, it just depends.

Both approaches have their benefits.

We can set the shadow mode via Javascript as well:

// open this.attachShadow(mode: open); // closed this.attachShadow(mode: closed); // cloneable this.attachShadow(cloneable: true); // delegateFocus this.attachShadow(delegatesFocus: true); // serialized this.attachShadow(serializable: true); // Manually assign an element to a slot this.attachShadow(slotAssignment: "manual");

About that last one, it says we have to manually insert the <slot> elements in JavaScript:

<my-element> <p>This WILL render in shadow DOM but not automatically.</p> </my-element> <script> customElements.define('my-element', class extends HTMLElement constructor() super(); this.attachShadow( mode: "open", slotAssignment: "manual" ); this.shadowRoot.innerHTML = '<slot></slot>'; connectedCallback() const slotElem = this.querySelector('p'); this.shadowRoot.querySelector('slot').assign(slotElem); ); </script>

Examples

Scott spent a great deal of time sharing examples that demonstrate different sorts of things you might want to do with the Shadow DOM when working with web components. I’ll rapid-fire those in here.

Get an array of element nodes in a slot

this.shadowRoot.querySelector('slot') .assignedElements(); // get an array of all nodes in a slot, text too this.shadowRoot.querySelector('slot') .assignedNodes();

When did a slot’s nodes change?

let slot = document.querySelector('div') .shadowRoot.querySelector("slot"); slot.addEventListener("slotchange", (e) => console.log(`Slot "$slot.name" changed`); // > Slot "saying" changed )

Combining imperative Shadow DOM with templates

Back to this example:

<my-status>available</my-status> <script> customElements.define('my-status', class extends HTMLElement constructor() super(); this.attachShadow(mode: "open"); this.shadowRoot.innerHTML = '<p>This item is currently: <slot></slot></p>'; ); </script>

Let’s get that string out of our JavaScript with reusable imperative shadow HTML:

<my-status>available</my-status> <template id="my-status"> <p>This item is currently: <slot></slot> </p> </template> <script> customElements.define('my-status', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); const template = document.getElementById('my-status'); this.shadowRoot.append(template.content.cloneNode(true)); ); </script>

Slightly better as it grabs the component’s name programmatically to prevent name collisions:

<my-status>available</my-status> <template id="my-status"> <p>This item is currently: <slot></slot> </p> </template> <script> customElements.define('my-status', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); const template = document.getElementById( this.nodeName.toLowerCase() ); this.shadowRoot.append(template.content.cloneNode(true)); ); </script>

Forms with Shadow DOM

Long story, cut short: maybe don’t create custom form controls as web components. We get a lot of free features and functionalities — including accessibility — with native form controls that we have to recreate from scratch if we decide to roll our own.

In the case of forms, one of the oddities of encapsulation is that form submissions are not automatically connected. Let’s look at a broken form that contains a web component for a custom input:

<form> <my-input> <template shadowrootmode="open"> <label> <slot></slot> <input type="text" name="your-name"> </label> </template> Type your name! </my-input> <label><input type="checkbox" name="remember">Remember Me</label> <button>Submit</button> </form> <script> document.forms[0].addEventListener('input', function() let data = new FormData(this); console.log(new URLSearchParams(data).toString()); ); </script>

This input’s value won’t be in the submission! Also, form validation and states are not communicated in the Shadow DOM. Similar connectivity issues with accessibility, where the shadow boundary can interfere with ARIA. For example, IDs are local to the Shadow DOM. Consider how much you really need the Shadow DOM when working with forms.

Element internals

The moral of the last section is to tread carefully when creating your own web components for form controls. Scott suggests avoiding that altogether, but he continued to demonstrate how we could theoretically fix functional and accessibility issues using element internals.

Let’s start with an input value that will be included in the form submission.

<form> <my-input name="name"></my-input> <button>Submit</button> </form>

Now let’s slot this imperatively:

<script> customElements.define('my-input', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = '<label><slot></slot><input type="text"></label>' ); </script>

The value is not communicated yet. We’ll add a static formAssociated variable with internals attached:

<script> customElements.define('my-input', class extends HTMLElement static formAssociated = true; constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = '<label><slot></slot><input type="text"></label>' this.internals = this.attachedInternals(); ); </script>

Then we’ll set the form value as part of the internals when the input’s value changes:

<script> customElements.define('my-input', class extends HTMLElement static formAssociated = true; constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = '<label><slot></slot><input type="text"></label>' this.internals = this.attachedInternals(); this.addEventListener('input', () => this-internals.setFormValue(this.shadowRoot.querySelector('input').value); ); ); </script>

Here’s how we set states with element internals:

// add a checked state this.internals.states.add("checked"); // remove a checked state this.internals.states.delete("checked");

Let’s toggle a “add” or “delete” a boolean state:

<form> <my-check name="remember">Remember Me?</my-check> </form> <script> customElements.define('my-check', class extends HTMLElement static formAssociated = true; constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = '<slot></slot>'; this.internals = this.attachInternals(); let addDelete = false; this.addEventListener("click", ()=> addDelete = !addDelete; this.internals.states[addDelete ? "add" : "delete"]("checked"); ); ); </script>

Let’s refactor this for ARIA improvements:

<form> <style> my-check display: inline-block; inline-size: 1em; block-size: 1em; background: #eee; my-check:state(checked)::before content: "[x]"; </style> <my-check name="remember" id="remember"></my-check><label for="remember">Remember Me?</label> </form> <script> customElements.define('my-check', class extends HTMLElement static formAssociated = true; constructor() super(); this.attachShadow(mode: 'open'); this.internals = this.attachInternals(); this.internals.role = 'checkbox'; this.setAttribute('tabindex', '0'); let addDelete = false; this.addEventListener("click", ()=> addDelete = !addDelete; this.internals.states[addDelete ? "add" : "delete"]("checked"); this[addDelete ? "setAttribute" : "removeAttribute"]("aria-checked", true); ); ); </script>

Phew, that’s a lot of work! And sure, this gets us a lot closer to a more functional and accessible custom form input, but there’s still a long way’s to go to achieve what we already get for free from using native form controls. Always question whether you can rely on a light DOM form instead.

Chapter 5: Styling Web Components

Styling web components comes in levels of complexity. For example, we don’t need any JavaScript at all to slap a few styles on a custom element.

<my-element theme="suave" class="priority"> <h1>I'm in the Light DOM!</h1> </my-element> <style> /* Element, class, attribute, and complex selectors all work. */ my-element display: block; /* custom elements are inline by default */ .my-element[theme=suave] color: #fff; .my-element.priority background: purple; .my-element h1 font-size: 3rem; </style>

This is not encapsulated! This is scoped off of a single element just light any other CSS in the Light DOM.

Changing the Shadow DOM mode from closed to open doesn’t change CSS. It allows JavaScript to pierce the Shadow DOM but CSS isn’t affected.

Let’s poke at it

<style> p color: red; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <p>Hi</p> </template> </div> <p>Hi</p>

This is three stacked paragraphs, the second of which is in the shadow root.

The first and third paragraphs are red; the second is not styled because it is in a <template>, even if the shadow root’s mode is set to open.

Let’s poke at it from the other direction:

<style> p color: red; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <style> p color: blue; </style> <p>Hi</p> </template> </div> <p>Hi</p>

The first and third paragraphs are still receiving the red color from the Light DOM’s CSS.

The <style> declarations in the <template> are encapsulated and do not leak out to the other paragraphs, even though it is declared later in the cascade.

Same idea, but setting the color on the <body>:

<style> body color: red; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <p>Hi</p> </template> </div> <p>Hi</p>

Everything is red! This isn’t a bug. Inheritable styles do pass through the Shadow DOM barrier.

Inherited styles are those that are set by the computed values of their parent styles. Many properties are inheritable, including color. The <body> is the parent and everything in it is a child that inherits these styles, including custom elements.

Let’s fight with inheritance

We can target the paragraph in the <template> style block to override the styles set on the <body>. Those won’t leak back to the other paragraphs.

<style> body color: red; font-family: fantasy; font-size: 2em; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <style> /* reset the light dom styles */ p color: initial; font-family: initial; font-size: initial; </style> <p>Hi</p> </template> </div> <p>Hi</p>

This is protected, but the problem here is that it’s still possible for a new role or property to be introduced that passes along inherited styles that we haven’t thought to reset.

Perhaps we could use all: initital as a defensive strategy against future inheritable styles. But what if we add more elements to the custom element? It’s a constant fight.

Host styles!

We can scope things to the shadow root’s :host selector to keep things protected.

<style> body color: red; font-family: fantasy; font-size: 2em; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <style> /* reset the light dom styles */ :host all: initial; </style> <p>Hi</p> <a href="#">Click me</a> </template> </div> <p>Hi</p>

New problem! What if the Light DOM styles are scoped to the universal selector instead?

<style> * color: red; font-family: fantasy; font-size: 2em; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <style> /* reset the light dom styles */ :host all: initial; </style> <p>Hi</p> <a href="#">Click me</a> </template> </div> <p>Hi</p>

This breaks the custom element’s styles. But that’s because Shadow DOM styles are applied before Light DOM styles. The styles scoped to the universal selector are simply applied after the :host styles, which overrides what we have in the shadow root. So, we’re still locked in a brutal fight over inheritance and need stronger specificity.

According to Scott, !important is one of the only ways we have to apply brute force to protect our custom elements from outside styles leaking in. The keyword gets a bad rap — and rightfully so in the vast majority of cases — but this is a case where it works well and using it is an encouraged practice. It’s not like it has an impact on the styles outside the custom element, anyway.

<style> * color: red; font-family: fantasy; font-size: 2em; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <style> /* reset the light dom styles */ :host all: initial; !important </style> <p>Hi</p> <a href="#">Click me</a> </template> </div> <p>Hi</p>

Special selectors

There are some useful selectors we have to look at components from the outside, looking in.

:host()

We just looked at this! But note how it is a function in addition to being a pseudo-selector. It’s sort of a parent selector in the sense that we can pass in the <div> that contains the <template> and that becomes the scoping context for the entire selector, meaning the !important keyword is no longer needed.

<style> * color: red; font-family: fantasy; font-size: 2em; </style> <p>Hi</p> <div> <template shadowrootmode="open"> <style> /* reset the light dom styles */ :host(div) all: initial; </style> <p>Hi</p> <a href="#">Click me</a> </template> </div> <p>Hi</p>

:host-context()

<header> <my-element> <template shadowrootmode="open"> <style> :host-context(header) ... /* matches the host! */ </style> </template> </my-element> </header>

This targets the shadow host but only if the provided selector is a parent node anywhere up the tree. This is super helpful for styling custom elements where the layout context might change, say, from being contained in an <article> versus being contained in a <header>.

:defined

Defining an element occurs when it is created, and this pseudo-selector is how we can select the element in that initially-defined state. I imagine this is mostly useful for when a custom element is defined imperatively in JavaScript so that we can target the very moment that the element is constructed, and then set styles right then and there.

<style> simple-custom:defined display: block; background: green; color: #fff; </style> <simple-custom></simple-custom> <script> customElements.define('simple-custom', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = "<p>Defined!</p>"; ); </script>

Minor note about protecting against a flash of unstyled content (FOUC)… or unstyled element in this case. Some elements are effectively useless until JavsScript has interacted with it to generate content. For example, an empty custom element that only becomes meaningful once JavaScript runs and generates content. Here’s how we can prevent the inevitable flash that happens after the content is generated:

<style> js-dependent-element:not(:defined) visibility: hidden; </style> <js-dependent-element></js-dependent-element>

Warning zone! It’s best for elements that are empty and not yet defined. If you’re working with a meaningful element up-front, then it’s best to style as much as you can up-front.

Styling slots

This does not style the paragraph green as you might expect:

<div> <template shadowrootmode="open"> <style> p color: green; </style> <slot></slot> </template> <p>Slotted Element</p> </div>

The Shadow DOM cannot style this content directly. The styles would apply to a paragraph in the <template> that gets rendered in the Light DOM, but it cannot style it when it is slotted into the <template>.

Slots are part of the Light DOM. So, this works:

<style> p color: green; </style> <div> <template shadowrootmode="open"> <slot></slot> </template> <p>Slotted Element</p> </div>

This means that slots are easier to target when it comes to piercing the shadow root with styles, making them a great method of progressive style enhancement.

We have another special selected, the ::slotted() pseudo-element that’s also a function. We pass it an element or class and that allows us to select elements from within the shadow root.

<div> <template shadowrootmode="open"> <style> ::slotted(p) color: red; </style> <slot></slot> </template> <p>Slotted Element</p> </div>

Unfortunately, ::slotted() is a weak selected when compared to global selectors. So, if we were to make this a little more complicated by introducing an outside inheritable style, then we’d be hosed again.

<style> /* global paragraph style... */ p color: green; </style> <div> <template shadowrootmode="open"> <style> /* ...overrides the slotted style */ ::slotted(p) color: red; </style> <slot></slot> </template> <p>Slotted Element</p> </div>

This is another place where !important could make sense. It even wins if the global style is also set to !important. We could get more defensive and pass the universal selector to ::slotted and set everything back to its initial value so that all slotted content is encapsulated from outside styles leaking in.

<style> /* global paragraph style... */ p color: green; </style> <div> <template shadowrootmode="open"> <style> /* ...can't override this important statement */ ::slotted(*) all: initial !important; </style> <slot></slot> </template> <p>Slotted Element</p> </div>

Styling :parts

A part is a way of offering up Shadow DOM elements to the parent document for styling. Let’s add a part to a custom element:

<div> <template shadowrootmode="open"> <p part="hi">Hi there, I'm a part!</p> </template> </div>

Without the part attribute, there is no way to write styles that reach the paragraph. But with it, the part is exposed as something that can be styled.

<style> ::part(hi) color: green; ::part(hi) b color: green; /* nope! */ </style> <div> <template shadowrootmode="open"> <p part="hi">Hi there, I'm a <b>part</b>!</p> </template> </div>

We can use this to expose specific “parts” of the custom element that are open to outside styling, which is almost like establishing a styling API with specifications for what can and can’t be styled. Just note that ::part cannot be used as part of a complex selector, like a descendant selector:

A bit in the weeds here, but we can export parts in the sense that we can nest elements within elements within elements, and so on. This way, we include parts within elements.

<my-component> <!-- exposes three parts to the nested component --> <nested-component exportparts="part1, part2, part5"></nested-component> </my-component>

Styling states and validity

We discussed this when going over element internals in the chapter about the Shadow DOM. But it’s worth revisiting that now that we’re specifically talking about styling. We have a :state pseudo-function that accepts our defined states.

<script> this.internals.states.add("checked"); </script> <style> my-checkbox:state(checked) /* ... */ </style>

We also have access to the :invalid pseudo-class.

Cross-barrier custom properties

<style> :root --text-primary: navy; --bg-primary: #abe1e1; --padding: 1.5em 1em; p color: var(--text-primary); background: var(--bg-primary); padding: var(--padding); </style>

Custom properties cross the Shadow DOM barrier!

<my-elem></my-elem> <script> customElements.define('my-elem', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = ` <style> p color: var(--text-primary); background: var(--bg-primary); padding: var(--padding); </style> <p>Hi there!</p>`; ) </script>

Adding stylesheets to custom elements

There’s the classic ol’ external <link> way of going about it:

<simple-custom> <template shadowrootmode="open"> <link rel="stylesheet" href="../../assets/external.css"> <p>This one's in the shadow Dom.</p> <slot></slot> </template> <p>Slotted <b>Element</b></p> </simple-custom>

It might seem like an anti-DRY approach to call the same external stylesheet at the top of all web components. To be clear, yes, it is repetitive — but only as far as writing it. Once the sheet has been downloaded once, it is available across the board without any additional requests, so we’re still technically dry in the sense of performance.

CSS imports also work:

<style> @import url("../../assets/external.css"); </style> <simple-custom> <template shadowrootmode="open"> <style> @import url("../../assets/external.css"); </style> <p>This one's in the shadow Dom.</p> <slot></slot> </template> <p>Slotted <b>Element</b></p> </simple-custom>

One more way using a JavaScript-based approach. It’s probably better to make CSS work without a JavaScript dependency, but it’s still a valid option.

<my-elem></my-elem> <script type="module"> import sheet from '../../assets/external.css' with type: 'css' ; customElements.define('my-elem', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = '<p>Hi there</p>'; this.shadowRoot.adoptedStyleSheets = [sheet]; ) </script>

We have a JavaScript module and import CSS into a string that is then adopted by the shadow root using shadowRoort.adoptedStyleSheets . And since adopted stylesheets are dynamic, we can construct one, share it across multiple instances, and update styles via the CSSOM that ripple across the board to all components that adopt it.

Container queries!

Container queries are nice to pair with components, as custom elements and web components are containers and we can query them and adjust things as the container changes.

<div> <template shadowrootmode="open"> <style> :host container-type: inline-size; background-color: tan; display: block; padding: 2em; ul display: block; list-style: none; margin: 0; li padding: .5em; margin: .5em 0; background-color: #fff; @container (min-width: 50em) ul display: flex; justify-content: space-between; gap: 1em; li flex: 1 1 auto; </style> <ul> <li>First Item</li> <li>Second Item</li> </ul> </template> </div>

In this example, we’re setting styles on the :host() to define a new container, as well as some general styles that are protected and scoped to the shadow root. From there, we introduce a container query that updates the unordered list’s layout when the custom element is at least 50em wide.

Next up…

How web component features are used together!

Chapter 6: HTML-First Patterns

In this chapter, Scott focuses on how other people are using web components in the wild and highlights a few of the more interesting and smart patterns he’s seen.

Let’s start with a typical counter

It’s often the very first example used in React tutorials.

<counter-element></counter-element> <script type="module"> customElements.define('counter-element', class extends HTMLElement #count = 0; connectedCallback() this.innerHTML = `<button id="dec">-</button><p id="count">$this.#count</p><button id="inc">+</button>`; this.addEventListener('click', e => this.update(e) ); update(e) if( e.target.nodeName !== 'BUTTON' ) return this.#count = e.target.id === 'inc' ? this.#count + 1 : this.#count - 1; this.querySelector('#count').textContent = this.#count; ); </script>

Reef

Reef is a tiny library by Chris Ferdinandi that weighs just 2.6KB minified and zipped yet still provides DOM diffing for reactive state-based UIs like React, which weighs significantly more. An example of how it works in a standalone way:

<div id="greeting"></div> <script type="module"> import signal, component from '.../reef.es..min.js'; // Create a signal let data = signal( greeting: 'Hello', name: 'World' ); component('#greeting', () => `<p>$data.greeting, $data.name!</p>`); </script>

This sets up a “signal” that is basically a live-update object, then calls the component() method to select where we want to make the update, and it injects a template literal in there that passes in the variables with the markup we want.

So, for example, we can update those values on setTimeout:

<div id="greeting"></div> <script type="module"> import signal, component from '.../reef.es..min.js'; // Create a signal let data = signal( greeting: 'Hello', name: 'World' ); component('#greeting', () => `<p>$data.greeting, $data.name!</p>`); setTimeout(() => data.greeting = '¡Hola' data,name = 'Scott' , 3000) </script>

We can combine this sort of library with a web component. Here, Scott imports Reef and constructs the data outside the component so that it’s like the application state:

<my-greeting></my-greeting> <script type="module"> import signal, component from 'https://cdn.jsdelivr.net/npm/reefjs@13/dist/reef.es.min.js'; window.data = signal( greeting: 'Hi', name: 'Scott' ); customElements.define('my-greeting', class extends HTMLElement connectedCallback() component(this, () => `<p>$data.greeting, $data.name!</p>` ); ); </script>

It’s the virtual DOM in a web component! Another approach that is more reactive in the sense that it watches for changes in attributes and then updates the application state in response which, in turn, updates the greeting.

<my-greeting greeting="Hi" name="Scott"></my-greeting> <script type="module"> import signal, component from 'https://cdn.jsdelivr.net/npm/reefjs@13/dist/reef.es.min.js'; customElements.define('my-greeting', class extends HTMLElement static observedAttributes = ["name", "greeting"]; constructor() super(); this.data = signal( greeting: '', name: '' ); attributeChangedCallback(name, oldValue, newValue) this.data[name] = newValue; connectedCallback() component(this, () => `<p>$this.data.greeting, $this.data.name!</p>` ); ); </script>

If the attribute changes, it only changes that instance. The data is registered at the time the component is constructed and we’re only changing string attributes rather than objects with properties.

HTML Web Components

This describes web components that are not empty by default like this:

<my-greeting></my-greeting>

This is a “React” mindset where all the functionality, content, and behavior comes from JavaScript. But Scott reminds us that web components are pretty useful right out of the box without JavaScript. So, “HTML web components” refers to web components that are packed with meaningful content right out of the gate and Scott points to Jeremy Keith’s 2023 article coining the term.

[…] we could call them “HTML web components.” If your custom element is empty, it’s not an HTML web component. But if you’re using a custom element to extend existing markup, that’s an HTML web component.

Jeremy cites something Robin Rendle mused about the distinction:

[…] I’ve started to come around and see Web Components as filling in the blanks of what we can do with hypertext: they’re really just small, reusable chunks of code that extends the language of HTML.

The “React” way:

<UserAvatar src="https://example.com/path/to/img.jpg" alt="..." />

The props look like HTML but they’re not. Instead, the props provide information used to completely swap out the <UserAvatar /> tag with the JavaScript-based markup.

Web components can do that, too:

<user-avatar src="https://example.com/path/to/img.jpg" alt="..." ></user-avatar>

Same deal, real HTML. Progressive enhancement is at the heart of an HTML web component mindset. Here’s how that web component might work:

class UserAvatar extends HTMLElement connectedCallback() const src = this.getAttribute("src"); const name = this.getAttribute("name"); this.innerHTML = ` <div> <img src="$src" alt="Profile photo of $name" width="32" height="32" /> <!-- Markup for the tooltip --> </div> `; customElements.define('user-avatar', UserAvatar);

But a better starting point would be to include the <img> directly in the component so that the markup is immediately available:

<user-avatar> <img src="https://example.com/path/to/img.jpg" alt="..." /> </user-avatar>

This way, the image is downloaded and ready before JavaScript even loads on the page. Strive for augmentation over replacement!

resizeasaurus

This helps developers test responsive component layouts, particularly ones that use container queries.

<resize-asaurus> Drop any HTML in here to test. </resize-asaurus> <!-- for example: --> <resize-asaurus> <div class="my-responsive-grid"> <div>Cell 1</div> <div>Cell 2</div> <div>Cell 3</div> <!-- ... --> </div> </resize-asaurus>

lite-youtube-embed

This is like embedding a YouTube video, but without bringing along all the baggage that YouTube packs into a typical embed snippet.

<lite-youtube videoid="ogYfd705cRs" style="background-image: url(...);"> <a href="https://youtube.com/watch?v=ogYfd705cRs" class="lyt-playbtn" title="Play Video"> <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span> </a> </lite-youtube> <link rel="stylesheet" href="./src.lite-yt-embed.css" /> <script src="./src.lite-yt-embed.js" defer></script>

It starts with a link which is a nice fallback if the video fails to load for whatever reason. When the script runs, the HTML is augmented to include the video��<iframe>.

Chapter 7: Web Components Frameworks Tour

Lit

Lit extends the base class and then extends what that class provides, but you’re still working directly on top of web components. There are syntax shortcuts for common patterns and a more structured approach.

The package includes all this in about 5-7KB:

Fast templating

Reactive properties

Reactive update lifecycle

Scoped styles

<simple-greeting name="Geoff"></simple-greeting> <script> import html, css, LitElement from 'lit'; export class SimpleGreeting extends LitElement state styles = css`p color: blue `; static properties = name: type = String, ; constructor() super(); this.name = 'Somebody'; render() return html`<p>Hello, $this.name!</p>`; customElements.define('simple-greeting', SimpleGreeting); </script>

Pros Cons Ecosystem No official SSR story (but that is changing) Community Familiar ergonomics Lightweight Industry-proven

webc

This is part of the 11ty project. It allows you to define custom elements as files, writing everything as a single file component.

<!-- starting element / index.html --> <my-element></my-element> <!-- ../components/my-element.webc --> <p>This is inside the element</p> <style> /* etc. */ </style> <script> // etc. </script>

Pros Cons Community Geared toward SSG SSG progressive enhancement Still in early stages Single file component syntax Zach Leatherman!

Enhance

This is Scott’s favorite! It renders web components on the server. Web components can render based on application state per request. It’s a way to use custom elements on the server side. 

Pros Cons Ergonomics Still in early stages Progressive enhancement Single file component syntax Full-stack stateful, dynamic SSR components

Chapter 8: Web Components Libraries Tour

This is a super short module simply highlighting a few of the more notable libraries for web components that are offered by third parties. Scott is quick to note that all of them are closer in spirit to a React-based approach where custom elements are more like replaced elements with very little meaningful markup to display up-front. That’s not to throw shade at the libraries, but rather to call out that there’s a cost when we require JavaScript to render meaningful content.

Spectrum

<sp-button variant="accent" href="components/button"> Use Spectrum Web Component buttons </sp-button>

This is Adobe’s design system.

One of the more ambitious projects, as it supports other frameworks like React

Open source

Built on Lit

Most components are not exactly HTML-first. The pattern is closer to replaced elements. There’s plenty of complexity, but that makes sense for a system that drives an application like Photoshop and is meant to drop into any project. But still, there is a cost when it comes to delivering meaningful content to users up-front. An all-or-nothing approach like this might be too stark for a small website project.

FAST

<fast-checkbox>Checkbox</fast-checkbox>

This is Microsoft’s system.

It’s philosophically like Spectrum where there’s very little meaningful HTML up-front.

Fluent is a library that extends the system for UI components.

Microsoft Edge rebuilt the browser’s Chrome using these components.

Shoelace

<sl-button>Click Me</sl-button>

Purely meant for third-party developers to use in their projects

The name is a play on Bootstrap. 🙂

The markup is mostly a custom element with some text in it rather than a pure HTML-first approach.

Acquired by Font Awesome and they are creating Web Awesome Components as a new era of Shoelace that is subscription-based

Chapter 9: What’s Next With Web Components

Scott covers what the future holds for web components as far as he is aware.

Declarative custom elements

Define an element in HTML alone that can be used time and again with a simpler syntax. There’s a GitHub issue that explains the idea, and Zach Leatherman has a great write-up as well.

Cross-root ARIA

Make it easier to pair custom elements with other elements in the Light DOM as well as other custom elements through ARIA.

Container Queries

How can we use container queries without needing an extra wrapper around the custom element?

HTML Modules

This was one of the web components’ core features but was removed at some point. They can define HTML in an external place that could be used over and over.

External styling

This is also known as “open styling.”

DOM Parts

This would be a templating feature that allows for JSX-string-literal-like syntax where variables inject data.

<section> <h1 id="name">name</h1> Email: <a id="link" href="mailto:email">email</a> </section>

And the application has produced a template with the following content:

<template> <section> <h1 id="name"></h1> Email: <a id="link" href=""></a> </section> </template>

Scoped element registries

Using variations of the same web component without name collisions.

[gagande]

Purecode | Crafting Styles with JavaScript Objects

Inline styles in React are not written as strings as in traditional CSS. Instead, they apply using a JavaScript object. The keys in this object must be camelCased versions of the CSS style names and numeric values are assumed to be pixels.

[codezup]

Simplify CSS with React Inline Styles and CSS-in-JS

Introduction Simplifying CSS with React Inline Styles and CSS-in-JS is a revolutionary approach to styling user interfaces, particularly in React applications. This method replaces traditional CSS files with inline styles written in JavaScript. It not only reduces the need for external CSS files but also offers a more organized and intuitive way to manage styles. In this comprehensive tutorial,…

[sohannabarberaesque]

Soooo ...

What would go through the minds of the Hair Bear Bunch and guests in the post-orgy sunrise dive in some lake up north, just wearing themselves and feeling satisfied from the sexercises of the night?

How would Peter Potamus react if it emerged he was the subject of some "cheap and degrading" Tijuana Bible presentation of his Polynesian exploits?

Could you imagine Huckleberry Hound's darlin' Clementine fixing up some Madeira cake as turns out being unmistakably popular with the neighbours over coffee, compelling her to keep baking such Madeira cake for an extended period?

What if the Skatebirds "themselves," in trying to pull off some radical inline skating moves, accidentally stumble upon an under-the-counter cache of pornographic white-supremacist trash?

Imagine Top Cat and clowder going into one of those Hollywood pastrami-sandwich shops for what turns out being an all-night pastrami sandwich binge. How would you imagine such turning out in the end?

So how could the Cattanooga Cats be mistaken for some LOLcat types when several such memes in the "I Can Has Cheezburger?" stylee turn up as invoke the band?

How often is Ranger Smith caught on the short end of the stick in trying to chastise Yogi and Boo-Boo for their picnic-basket plundering exercises in Jellystone Park, such as by tripping over rocks, tree roots or other obstacles?

What could be Magilla Gorilla's reaction when it emerges that the "bananas" he had been eating were actually plantain, which is a close biological relative of bananas?

[pattemdigitalblogs]

Choosing Between React JS and React Native: What You Need to Know

Rising the Introduction of React JS and React Native

React JS and React Native, over the past few years, have gained immense popularity and it was developed by Facebook. They both are the JavaScript library that is used for building single-page applications that can run in the browser and interact with the DOM. But concerning the other side, React Native is a framework that is built on React JS principles but designed for creating all the native mobile applications for iOS and Android. It uses React components but translates them into native code to leverage mobile platform features. In this blog, we’ll break down the differences between React JS and React Native and explore their core concepts. Let’s get started!

Sprinkling the Basic Ideology of React JS and React Native

Now let’s jump into the segment of understanding the basics of React JS and React Native. When it comes to React JS, it is a JavaScript library that is used for building user interfaces and is primarily for all single-page web applications. Moreover, it allows developers to create all the reusable components that makeup web applications. It also allows developers to create all the reusable components of a web application that effectively update and render the UI in response to user interactions or data changes. React JS runs in the browser and manipulates the DOM to display all the content.

React Native, on the other hand, is a framework that extends the principles of React JS to mobile app development. Instead of running in a browser, React Native enables developers to build native mobile applications for iOS and Android. It uses the same core concepts as React JS, such as reusable components, but translates these components into native code that interacts with the mobile operating system. This means you can build high-performance apps with a look and feel that is consistent with the platform’s native user experience.

Shreading the Fabrics of the Differences Between React and React Native 

When we talk about React and React Native differences, it is designed for all the different platforms and has several other distinct features. React is used to build all the single-web applications that run in the browser and interact with the DOM to update the user interface dynamically. On the other side of the coin, React Native is designed to build native mobile applications for iOS and Android. It translates React components into native code, which allows for native app performance and access to mobile-specific features. Besides, another difference is that React uses CSS for styling all the components either way via traditional stylesheets or preprocessors like SASS. On the other side, React Native is a JavaScript-based styling approach similar to CSS but with some differences, these styles are applied using an inline style syntax and supported properties are specific to mobile applications. 

In addition to the performance, it is generally tied to how efficiently the web application interacts with DOM and handles all the updates, respectively. On the other hand, react native offers native performance by converting all the components to native code, which overall allows it to utilize the full power of the mobile device’s hardware and the operating system.

Concluding the Differences Between React and React Native 

As we have seen from the above blog, React JS and React Native were both developed by Facebook and have revolutionized web and mobile application development. It makes use of all the reusable components and efficient state management, and react js is ideal for creating dynamic and interactive single-page applications that run smoothly in the browser and manipulate the DOM respectively. While on the other side of the plate, react native extends these concepts to mobile app development which allows the creation of high-performance native applications for iOS and Android by translating all the React components into the native code section. 

When we see about React JS it majorly focuses on web technologies with CSS that is based on styling and DOM interactions while react native adapts all these principles for mobile platforms which utilizes the native components and a JavaScript which is based on styling approach. 

Now let’s move on to understanding the leading React js development company Pattem Digital, that utilizes React JS and React Native that specializes in building innovative web and mobile applications that are tailored accordingly to the specific needs and objectives. 

[naveen234]

React vs. React Native: Understanding the Key Differences

In the world of modern web and mobile development, React and React Native stand out as two powerful frameworks created by Facebook. Both have revolutionized the way developers build applications, but they serve different purposes and excel in unique areas. In this blog, we will explore the React vs. React Native, shedding light on their individual strengths and use cases.

What is React?

React, also known as React.js or ReactJS, is a popular JavaScript library used for building user interfaces, particularly for single-page applications. difference between React and React Native enables developers to create reusable UI components, which can manage their own state and render efficiently when data changes. It follows a component-based architecture, making it easier to maintain and scale applications.

What is React Native?

React Native, on the other hand, is a framework for building mobile applications using JavaScript. Unlike traditional native development, which requires separate codebases for iOS and Android, React Native allows developers to write a single codebase that runs on both platforms. It uses native components, ensuring high performance and a native look and feel.

Core Differences Between React and React Native

Platform Focus:

React: Primarily used for building web applications.

React Native: Designed for building cross-platform mobile applications.

Component Libraries:

React: Utilizes standard HTML tags and web-based components.

React Native: Uses native mobile components like , , and instead of web components.

Styling:

React: Uses CSS for styling.

React Native: Uses a subset of CSS and inline styles for styling components. Styles in React Native are closer to JavaScript objects than traditional CSS.

Rendering:

React: Renders to the DOM (Document Object Model) for web browsers.

React Native: Renders to native components, providing a more authentic mobile experience.

Development Environment:

React: Development typically occurs in a web environment using tools like Webpack, Babel, and browser-based debugging.

React Native: Requires tools like Xcode for iOS and Android Studio for Android development, along with React Native CLI or Expo for easier setup and development.

Benefits of Using React

React is favored for its simplicity, flexibility, and performance in building dynamic web applications. The component-based architecture makes it easy to manage complex applications by breaking them down into smaller, manageable pieces. React’s virtual DOM ensures efficient updates and rendering, enhancing the user experience.

Benefits of Using React Native

The primary advantage of React Native is the ability to build cross-platform mobile applications with a single codebase. This not only speeds up development but also reduces costs and efforts in maintaining separate codebases for iOS and Android. React Native’s use of native components ensures that the apps have a native look and feel, providing a seamless user experience.

Choosing Between React and React Native

When deciding between React vs. React Native, the primary consideration should be the target platform. If your goal is to build a web application, React is the clear choice. It excels in creating high-performing, scalable web applications with reusable components.

On the other hand, if your aim is to develop a mobile application that works on both iOS and Android, React Native is the way to go. It allows for faster development cycles and code sharing across platforms while maintaining a native user experience.

Conclusion

Understanding the difference between React and React Native is crucial for developers aiming to choose the right tool for their project. While React is unparalleled in building web applications, React Native shines in the realm of cross-platform mobile development. By leveraging the strengths of each, developers can create efficient, high-quality applications tailored to their specific needs.

[digitalmarketing1o1]

Mastering React: A Comprehensive Guide to Building Dynamic Web Applications

In this in-depth React course, you'll embark on a journey to master one of the most popular JavaScript libraries for building user interfaces. Whether you're a beginner eager to dive into the world of front-end development or an experienced developer looking to enhance your skills, this course offers something for everyone.

Throughout the course, you'll learn the fundamentals of React, including JSX syntax, component-based architecture, state management, and handling user input. You'll explore advanced topics such as routing, hooks, context API, and working with external APIs. By the end, you'll have the skills and confidence to build dynamic, interactive web applications with React.

Key topics covered:

Understanding the Basics: Get started with React by learning about JSX, components, props, and state.

Building Reusable Components: Explore the power of component-based architecture and learn how to create reusable UI elements.

Managing State: Master the various techniques for managing state in React applications, including useState and useContext hooks.

Handling User Input: Learn how to handle user input through forms, controlled components, and form validation.

Routing with React Router: Dive into client-side routing with React Router and create single-page applications with multiple views.

Working with External Data: Connect your React applications to external APIs and learn best practices for fetching and displaying data.

Styling in React: Explore different approaches for styling React components, including CSS modules, styled-components, and inline styles.

Optimizing Performance: Discover techniques for optimizing the performance of your React applications, including code splitting and memoization.

Testing React Applications: Learn the basics of testing React components using popular testing libraries like Jest and React Testing Library.

Deployment and Beyond: Deploy your React applications to hosting platforms like Netlify or Vercel and explore additional resources for further learning.

By the end of this course, you'll have a solid understanding of React and be equipped with the skills to build modern, responsive web applications that delight users and impress employers. Whether you're pursuing a career in web development or working on personal projects, mastering React is sure to open doors and elevate your programming skills.

[alcaxsolutions]

A Comprehensive Guide To React Native App Development

In recent years, React Native has emerged as a powerful and widely adopted framework for mobile app development. Developed by Facebook, React Native allows developers to build cross-platform mobile applications using the same codebase for both iOS and Android platforms. This guide aims to provide a comprehensive overview of React Native development company, from the basics to advanced concepts.

Understanding React Native

1. Introduction to React Native

React Native is a JavaScript framework that leverages the popular React library for building user interfaces. It enables developers to use React components and concepts to create native mobile apps. This means you can write your code once and deploy it on both iOS and Android platforms, saving time and effort in the development process.

2. Key Features of React Native

Cross-Platform Development: Develop once, deploy everywhere. React Native allows you to use a single codebase for both iOS and Android platforms, reducing development time and costs.

Hot Reloading: See the results of code changes in real-time without losing the app's state. This feature enhances the development workflow, making it faster and more efficient.

Reusable Components: React Native allows you to create modular and reusable components, promoting a component-based architecture for building user interfaces.

Native Performance: Unlike hybrid frameworks, React Native compiles down to native code, providing near-native performance for mobile apps.

Setting Up Your Development Environment

1. Installing Node.js and npm

Before starting with React Native, make sure you have Node.js and npm (Node Package Manager) installed on your machine. These are essential for managing dependencies and running JavaScript code.

2. Installing React Native CLI

Use the React Native command-line interface (CLI) to create, build, and run React Native projects. Install it globally using npm:

3. Creating a New React Native Project

Create a new React Native project using the following command:

This will set up a new project with the necessary files and folder structure.

Building Your React Native App

1. Project Structure

Understand the basic structure of a React Native project. Learn about the main directories such as android and ios for platform-specific code, and the src directory for your application's source code.

2. Components and Props

In React Native, UI is built using components. Components can be functional or class-based, and they can receive data through props. Learn how to create and use components to structure your app's UI.

3. Styling in React Native

Explore styling options in React Native, including inline styles and external stylesheets. Understand how to create responsive designs that work well on different devices.

4. Navigation in React Native

Navigation is a crucial aspect of mobile app development. Learn about React Navigation, a popular library for implementing navigation in React Native apps. Explore stack navigation, tab navigation, and drawer navigation.

Advanced Concepts in React Native

1. State Management

Understand the importance of state management in React Native. Explore the use of React's built-in state and learn about external state management libraries like Redux or MobX.

2. Native Modules and Bridges

Integrate native modules written in Swift (for iOS) or Java/Kotlin (for Android) into your React Native project. Learn how to build bridges between native code and React Native, allowing seamless communication between the two.

3. Animations and Gestures

Create engaging user experiences by implementing animations and gestures. React Native provides APIs for handling animations and gestures, making it easy to add polished and interactive elements to your app.

4. Debugging and Testing

Master the art of debugging React Native applications. Explore tools like React DevTools and learn how to use the Chrome Developer Tools for debugging.

Optimizing and Deploying Your React Native App

1. Performance Optimization

Understand techniques for optimizing the performance of your React Native app. This includes code splitting, lazy loading, and optimizing images.

2. Building for Production

Learn how to build a production-ready version of your React Native app. Explore the process of code bundling, minification, and obfuscation to create a compact and efficient deployment package.

3. Deployment to App Stores

Follow the necessary steps to deploy your React Native app to the Apple App Store and Google Play Store. Understand the submission process, including code signing, app store listings, and release management.

Community and Resources

1. React Native Community

Join the vibrant React Native community. Explore forums, social media groups, and conferences where you can connect with other developers, share knowledge, and seek assistance.

2. Online Resources and Tutorials

Stay updated with the latest trends and best practices in React Native development. Utilize online resources, tutorials, and documentation to enhance your skills and stay informed about updates to the framework.

Conclusion

React Native has transformed the landscape of mobile app development, offering a powerful solution for building cross-platform applications. By mastering the fundamentals, exploring advanced concepts, and staying engaged with the community, developers can leverage the full potential of React Native to create high-quality and efficient mobile apps. Whether you are a beginner or an experienced developer, this comprehensive guide serves as a roadmap for navigating the exciting world of Hire React Native App Developer.

[speedyposts]

Turkey kills two attackers during assault on Istanbul court

Turkish police have killed two shooters who attacked a courthouse in Istanbul, in what authorities have labelled a terrorist act.

The incident late on Tuesday morning also saw six people injured, including three police officers, officials said. Reportedly carried out by a radical left-wing group, the attack is the latest to hit Turkey as the war in Gaza spreads tension across the Middle East.

.adtnl2-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 600px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin: 20px auto; } .adtnl2-banner { width: 100%; max-height: 250px; overflow: hidden; } .adtnl2-banner a img { width: 100%; height: auto; max-height: 250px; } .adtnl2-content { width: 100%; padding: 20px; box-sizing: border-box; text-align: left; } .adtnl2-title a { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: #333; } .adtnl2-description { font-size: 1.2em; color: #555; margin-bottom: 15px; } .adtnl2-learn-more-button { display: inline-block; padding: 10px 20px; font-size: 1.2em; font-weight: bold; text-decoration: none; background-color: #4CAF50; color: #fff; border-radius: 50px; /* Pill style border-radius */ transition: background-color 0.3s; border-color: #4CAF50; } .adtnl2-learn-more-button:hover { background-color: #45a049; } .adtnl2-marker { font-size: 0.8em; color: #888; margin-top: 10px; }

Konga Clearance Sale - Jara Deals at 70% Off

Shop Electronics, Home and Kitchen items and more in January's Exclusive Deals. Save 70% Off on Groceries, Electronics, Home & Kitchen, Phones, Tech Gadgets. Su

Buy Now

Ads by BCI

Turkish Interior Minister Ali Yerlikaya said on X that the shooters were killed in a gun battle after they opened fire on a checkpoint near the Caglayan Courthouse in Istanbul.

The attackers, a man and a woman identified only as EY and PB, were members of the Revolutionary People’s Liberation Party/Front (DHKP-C) “terrorist” group, he said.

The (DHKP-C) is a leftist armed group that has waged a campaign against the Turkish state since the 1980s.

Footage from the scene in the aftermath of the incident showed a heavy police presence at the entrance to the courthouse, with entry and exit points closed.

Justice Minister Yilmaz Tunc said prosecutors had launched an investigation into the attack.

The assault follows closely in the wake of several other armed attacks in Turkey, as unrest grows amid the war in Gaza.

Masked ISIL (ISIS) gunmen stormed a church in Istanbul last month during Sunday mass and killed one person. Authorities have since captured several people suspected of being linked to the group or the attack.

The Kurdistan Workers’ Party (PKK) armed group, which has also waged a bloody campaign against the Turkish government for decades, launched a suicide attack on the interior ministry building in capital Ankara in October.

Turkish authorities reacted by bombing Kurdish positions in northern Iraq and have since arrested hundreds with purported links to Kurdish groups.

.adtnl2-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 600px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin: 20px auto; } .adtnl2-banner { width: 100%; max-height: 250px; overflow: hidden; } .adtnl2-banner a img { width: 100%; height: auto; max-height: 250px; } .adtnl2-content { width: 100%; padding: 20px; box-sizing: border-box; text-align: left; } .adtnl2-title a { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: #333; } .adtnl2-description { font-size: 1.2em; color: #555; margin-bottom: 15px; } .adtnl2-learn-more-button { display: inline-block; padding: 10px 20px; font-size: 1.2em; font-weight: bold; text-decoration: none; background-color: #4CAF50; color: #fff; border-radius: 50px; /* Pill style border-radius */ transition: background-color 0.3s; border-color: #4CAF50; } .adtnl2-learn-more-button:hover { background-color: #45a049; } .adtnl2-marker { font-size: 0.8em; color: #888; margin-top: 10px; }

Konga Clearance Sale - Jara Deals at 70% Off

Shop Electronics, Home and Kitchen items and more in January's Exclusive Deals. Save 70% Off on Groceries, Electronics, Home & Kitchen, Phones, Tech Gadgets. Su

Buy Now

Ads by BCI

[metricsviews]

Decoding React's Building Blocks: A Comprehensive Dive into Understanding Components

How Do React Components Work?

A component in React is a reusable, self-contained building block that contains a portion of the user interface along with its functionality. Parts might be as basic as a button or as intricate as a whole page. By dividing the user interface into small, manageable chunks, components aim to improve the modularity and maintainability of the development process.

Functional Components

React components come in the most basic form as functional components. These are JavaScript functions that return React elements after accepting props, which is short for properties, as arguments. React 16.8 brought React Hooks, which gave functional components the ability to handle state and side effects, increasing their strength and adaptability.

    jsx

 import React from 'react';

 const MyComponent = (props) => {

  return <div>{props.message}</div>;

 };

Class Components

The more traditional method of defining components in React is using class components, which are still in use today. They have access to lifecycle methods—functions that are called at various stages of a component's life—and can manage local state. But in contemporary React development, functional components have mainly taken the role of class components since the release of Hooks.

     Jsx

import React, { Component } from 'react';

class MyComponent extends Component {

  constructor(props) {

    super(props);

    this.state = { message: 'Hello, React!' };

  }

  render() {

    return <div>{this.state.message}</div>;

  }

}

Props and State

Props and state are two essential concepts in React components.

Props

Props are React components' inputs. They enable data to be passed from the parent component to its offspring. Because props are immutable, a child component cannot change the props it inherits.

     jsx        

// Parent Component

import React from 'react';

import ChildComponent from './ChildComponent';

const ParentComponent = () => {

  return <ChildComponent message="Hello from parent!" />;

};

// Child Component

const ChildComponent = (props) => {

  return <div>{props.message}</div>;

};

State

State, which can vary over time as a result of user interactions or other causes, denotes the internal state of a component. Because state is modifiable, modifications to it cause the component to be rendered again.

    jsx

import React, { useState } from 'react';

const Counter = () => {

  const [count, setCount] = useState(0);

  const increment = () => {

    setCount(count + 1);

  };

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={increment}>Increment</button>

    </div>

  );

};

Styling React Components

A key component of web development is styling, and React components provide a variety of methods for handling it. Inline styles, external stylesheet imports, and CSS-in-JS libraries like styled-components are the three ways you can apply styles directly. Every strategy has benefits, and the decision is frequently based on the demands of the project as well as individual preferences.

Inline Styles

React's inline styles let you use JavaScript objects to apply styles directly within the component. With this method, styling at the component level is possible and styles can be dynamically altered based on props or state.

   jsx

const StyledComponent = () => {

  const styles = {

    color: 'blue',

    fontSize: '16px',

  };

  return <div style={styles}>I'm styled with inline styles</div>;

};

External stylesheets

Additionally, you can apply styles to your React components by using external stylesheets. Apply class names in your component file after importing the stylesheet.

   jsx

// styles.css

.myComponent {

  color: green;

  font-size: 18px; }

// Component file

import React from 'react';

import './styles.css';

const StyledComponent = () => {

return <div className="myComponent">I'm styled with an external stylesheet</div>;

};

Lifecycle of a Component

Class components have a lifespan that includes mounting, updating, and unmounting, among other stages. Developers can hook into these stages and run code at designated intervals by using lifecycle methods. Nevertheless, functional components can now employ useEffect to have lifecycle-like behavior thanks to the advent of Hooks.

In summary

The foundation of contemporary web development is made up of React components, which provide an effective and modular method of creating user interfaces. Components, whether functional or class-based, offer an organized method for handling and arranging user interface elements. Learning about props, state, and lifecycle as you go with React development will enable you to build dynamic, interactive online applications.

Credit – Vidyadhar Chavan

MetricsViews Pvt. Ltd.

MetricsViews specializes in building a solid DevOps strategy with cloud-native including AWS, GCP, Azure, Salesforce, and many more.  We excel in microservice adoption, CI/CD, Orchestration, and Provisioning of Infrastructure - with Smart DevOps tools like Terraform, and CloudFormation on the cloud.

www.metricsviews.com